<!--
  -  Copyright 2020 Huawei Technologies Co., Ltd.
  -
  -  Licensed under the Apache License, Version 2.0 (the "License");
  -  you may not use this file except in compliance with the License.
  -  You may obtain a copy of the License at
  -
  -      http://www.apache.org/licenses/LICENSE-2.0
  -
  -  Unless required by applicable law or agreed to in writing, software
  -  distributed under the License is distributed on an "AS IS" BASIS,
  -  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  -  See the License for the specific language governing permissions and
  -  limitations under the License.
  -->

<template>
  <div
    id="edgeNodeMap"
    class="content"
  />
</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
export default {
  name: 'Map',
  props: {
    detail: {
      required: true,
      type: Object,
      detault: function () {
        return null
      }
    }
  },
  data () {
    return {
      chinaId: 100000,
      chinaName: 'china',
      chinaJson: null,
      continue: true,
      btnShow: false,
      map: null
    }
  },
  mounted () {
    let arr = []
    arr.push(this.detail)
    this.showLayers(arr)
    this.$emit('node', this.detail)
  },
  methods: {
    showLayers (arr) {
      this.$nextTick(() => {
        this.openlayers(arr)
      })
    },
    openlayers (data) {
      this.btnShow = true
      data.forEach((item, index) => {
        item.coordinates = item.coordinates.split(',')
      })
      let x = Number(data[0].coordinates[0])
      let y = Number(data[0].coordinates[1])
      console.log('test:' + x + ': ' + y)
      if (this.map) {
        this.map.setView(new View({
          projection: 'EPSG:4326',
          center: [x, y],
          zoom: 16
        }))
      } else {
        this.map = new Map({
          target: 'edgeNodeMap',
          layers: [
            new TileLayer({
              source: new XYZ({
                url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
              })
            })
          ],
          view: new View({
            projection: 'EPSG:4326',
            center: [x, y],
            zoom: 16
          })
        })
      }
    }
  }
}
</script>

<style lang='less' scoped>
.content {
  width: 1100px;
  height: 600px;
  z-index: 99;
}
</style>
